<template>
  <div class="formula-content">
    <button class="copy" @click="handleCopy(props.code)">Copy</button>
    <preview-code v-if="flag" :code="code" :type="type"> </preview-code>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import PreviewCode from './PreviewCode.vue'
import { handleCopy } from '@/utils/tools'

const props = defineProps({
  code: {
    type: String,
    default: `console.log("hello world");`
  },
  type: {
    type: String,
    default: 'js'
  },
  description: {
    type: String,
    default: ''
  }
})
let flag = ref(true)
watch(
  () => props.code,
  (newVal: string) => {
    // console.log(newVal)
    flag.value = false
    nextTick(() => {
      flag.value = true
    })
  }
)
</script>

<style lang="scss" scoped>
.formula-content {
  position: relative;
  .copy {
    position: absolute;
    top: 4px;
    right: 4px;
    border-radius: 3px;
    background-color: #3b843c;
    opacity: 0;
    color: #ffffff;
    border: none;
    cursor: pointer;
    padding: 3px 7px;
    font-size: 14px;
    transition: all 0.2s;
  }

  @media screen and (max-width: 600px) {
    .copy {
      opacity: 1;
      background-color: #3b843c80;
    }
  }

  &:hover .copy {
    opacity: 1;
  }
}
</style>
